<template>
    <div>
        <p>markdown quill demo <el-button type="text"  @click="dialogShow = true">查看效果</el-button></p>
        <div class="quill-wrap">
            <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" />
        </div>
        <el-dialog title="效果区" :visible.sync="dialogShow">
            <div style="width: 100%">
                <div v-html="content" class="ql-editor" style="border: 1px solid palevioletred"></div>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import Quill from 'quill'
    import { quillEditor } from 'vue-quill-editor'
    import ImageResize from 'quill-image-resize-module'  //添加
    Quill.register('modules/imageResize', ImageResize);  //添加

    export default {
        name: "context",
        components: {quillEditor},
        mounted() {
        },
        data() {
            return {
                dialogShow:  false,
                content: '<h2 class="ql-align-center"><strong style="background-color: rgb(248, 248, 249); color: rgb(0, 0, 0);">十九届六中全会决议中的10个明确</strong><span style="color: rgb(63, 62, 62);"> </span></h2><p><span style="color: rgb(63, 62, 62);">    习近平新时代中国特色社会主义思想是当代中国马克思主义、二十一世纪马克思主义，是中华文化和中国精神的时代精华，实现了马克思主义中国化新的飞跃。十九届六中全会决议，用10个“明确”概括了核心内容。</span></p><p><br></p><p><br></p><p>﻿</p>',
                editorOption: {
                    modules: {
                        imageResize: {   //添加
                            displayStyles: {   //添加
                                backgroundColor: 'black',
                                border: 'none',
                                color: 'white'
                            },
                            modules: ['Resize', 'DisplaySize', 'Toolbar']   //添加
                        },
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike',  { 'align': [] }],
                            [{'list': 'ordered'}, {'list': 'bullet'}],
                            [{ 'color': [] }, { 'background': [] },'image'],
                            // ['formula', 'clean'],
                            // ['blockquote', 'code-block'],

                            // [{'script': 'sub'}, {'script': 'super'}],
                            // ['size', 'header'],
                            [{'size': [false,'small','large', 'huge', ]}, {'header': [false, 6, 5, 4, 3, 2, 1]}],
                            // [{ 'font': 'fonts' }],

                            // [{'direction': 'rtl'}]
                        ]
                    },
                    placeholder: '输入内容........'
                }

            }
        },
        watch: {
            content: function (val) {
                console.log('new: %s', val)
            }
        }
    }
</script>

<style  lang="scss" scoped>
    .quill-editor,
    .quill-code {
        width: 100%;
    }
    .quill-code {
        height: auto;
        border: none;
        > .title {
            border: 1px solid #ccc;
            border-left: none;
            height: 3em;
            line-height: 3em;
            text-indent: 1rem;
            font-weight: bold;
        }
        > code {
            width: 100%;
            margin: 0;
            padding: 1rem;
            border: 1px solid #ccc;
            border-top: none;
            border-left: none;
            border-radius: 0;
            height: 30rem;
            overflow-y: auto;
        }
    }
</style>
